<div *ngIf="app$ | async as app; else $loading">
  <div class="appInfo">
    <div class="info-left">
      <img class="icon" dstoreCover="icon" [src]="app.info.icon" /> <br />
      <div>
        <dstore-control class="control" [soft]="app" #controlRef [hidden]="controlRef.job$ | async"></dstore-control>
      </div>
      <ng-container *ngIf="controlRef.job$ | async as job">
        <dstore-progress-button
          [job]="job.job"
          [type]="job.type"
          [status]="job.status"
          [progress]="job.progress"
          [disabled]="!job.cancelable || job.status === StoreJobStatus.failed"
        ></dstore-progress-button>
      </ng-container>
    </div>
    <div class="info-right">
      <div class="title selectable">{{ app.info.name }}</div>
      <div class="content">
        <div i18n>Rating:</div>
        <div class="rate">
          <ng-container *ngIf="app.stat as stat">
            <dstore-star [rate]="stat.score / 2"></dstore-star>
            <span class="details">{{ (stat.score / 2).toFixed(1) }}</span>
            <span class="details" i18n>{{ stat.download }} downloads</span>
            <span class="details" i18n>{{ stat.score_count }} ratings</span>
          </ng-container>
        </div>
        <div i18n>Category:</div>
        <div>{{ app.info.category | categoryText | async }}</div>
        <ng-container *ngIf="controlRef.package$ | async as package">
          <div i18n>Version:</div>
          <div>{{ package.remoteVersion || package.localVersion }}</div>
          <ng-container *ngIf="allowName$ | async">
            <div>Package:</div>
            <div>{{ package.packageName }}</div>
          </ng-container>
          <div i18n>Size:</div>
          <div>
            <ng-container *ngIf="(size$ | async)?.get(app.name) as size; else calculating">
              {{ size | sizeHuman }}
            </ng-container>
            <ng-template #calculating let-size>
              <ng-container *ngIf="size === null" i18n>Calculating</ng-container>
              <ng-container *ngIf="size === 0" i18n>Downloaded</ng-container>
            </ng-template>
          </div>
          <div i18n>Updated Date:</div>
          <div>
            {{ app.updated_at | date: 'yyyy-MM-dd HH:mm' }}
            <ng-container *ngIf="supportSignIn && package.remoteVersion">
              <span class="toRight">&lt;</span>
              <button class="reminder" (click)="reminder(app.name, package.remoteVersion)">
                <ng-container i18n>Ask for update</ng-container>
              </button>
            </ng-container>
          </div>
        </ng-container>
        <ng-container *ngIf="app.info.author">
          <div i18n>Developer:</div>
          <div>
            <a [routerLink]="['/list', 'author', app.info.author]">{{ app.info.author }}</a>
          </div>
        </ng-container>
        <ng-container *ngIf="app.info.packager">
          <div i18n>Packager:</div>
          <div>
            <a [routerLink]="['/list', 'packager', app.info.packager]">{{ app.info.packager }}</a>
          </div>
        </ng-container>

        <ng-container *ngIf="app.info.homePage">
          <div i18n>Website:</div>
          <div class="webSite" (click)="openURL(app.homePage)">
            {{ app.info.homePage }}
          </div>
        </ng-container>
        <ng-container *ngIf="app.info.source">
          <div i18n>Source:</div>
          <div class="source" [ngSwitch]="app.info.source">
            <ng-container *ngSwitchCase="SoftSource.ThirdParty" i18n>Third-party</ng-container>
            <ng-container *ngSwitchCase="SoftSource.Official" i18n>Official</ng-container>
            <ng-container *ngSwitchCase="SoftSource.Collaborative" i18n>Collaboration</ng-container>
          </div>
        </ng-container>
        <ng-container *ngIf="app.info.tags?.length">
          <div i18n>Tag:</div>
          <div class="tags" *ngIf="app.info.tags.length > 0">
            <div *ngFor="let tag of app.info.tags">
              <span class="tag" [routerLink]="['/list', 'tag', tag]">
                {{ tag }}
              </span>
            </div>
          </div></ng-container
        >
        <div i18n>Description:</div>
        <div class="pre selectable">
          {{ app.info.description }}
        </div>
      </div>
    </div>
  </div>
  <br />
  <br />

  <app-screenshot [screenshotList]="app.info.screenshot"></app-screenshot>

  <ng-container *ngIf="supportSignIn && controlRef.package$ | async as package">
    <app-donate [appName]="app.name"></app-donate>
    <div class="hr"></div>
    <br />
    <dstore-app-comment
      [appName]="app.name"
      [version]="package.remoteVersion || package.localVersion"
    ></dstore-app-comment>
    <div class="ad" *ngIf="adVisible$ | async">
      <ng-container i18n>CDN supported by UPYUN</ng-container>
    </div>
  </ng-container>
</div>

<ng-template #$loading let-$app>
  <div class="loadingContainer" *ngIf="$app === null; else $DropOff">
    <app-wait></app-wait>
  </div>

  <ng-template #$DropOff>
    <div class="dropOff">
      <img class="tips_bg" src="/assets/icons/tips_bg.svg" />
      <span i18n>Sorry</span>
      <span i18n>It's in adjustment, you can return to</span>
      <a href="javascript:history.go(-1)" i18n>Previous</a>
    </div>
  </ng-template>

  <ng-template>
    <div>
      <span i18n>Sorry</span>
      <span i18n>Connection failed, please check your network and refresh</span>
    </div>
  </ng-template>

  <ng-template>
    <div><span i18n>Sorry</span> <span i18n>Something goes wrong.</span></div>
  </ng-template>
</ng-template>
